<template>
  <div>
    <div class="c-ph24 ">
      <div @click="clickRecordItem(item)" v-for="(item,index) in recordList" :key="index" class="c-flex-row c-pv30 c-bd-b1" :class="item.prodType == 92 ? 'imgCloseBig' : ''">
        <div class="c-ww210 c-maxh140 c-text-hidden c-p c-flex-shrink0 c-br10">
          <img src="../../../../public/i/wap/coupon/couponPoints.png" alt="" class="c-w100" v-if="item.prodType==92">
          <img v-lazy="item.cover || require('../../../assets/defult270.png')" :key="item.cover" class="c-w100" v-else />
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-fs24">
          <div class="c-text-ellipsis2 c-lh30 c-hh60">{{item.prodName}}</div>
          <div class="theme-fc">{{item.usePoints}}{{companyAuth.integrateName1}}</div>
          <div class="c-fc-gray c-fs20">兑换时间：{{item.createdAt}}</div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="!isLoading && dataStatus == 'NO_DATA'" :noDataText="'暂无记录'" :showLoading="isLoading" :noMoreData="dataStatus == 'NO_MORE_DATA'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
let pageIndex = 1;
export default {
  name: "ExchangeRecord",
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      recordList: [],
      isLoading: false,
      companyAuth: localStorage.getItem("companyAuth")
        ? JSON.parse(localStorage.getItem("companyAuth"))
        : null,
      dataStatus: "NO_MORE_DATA"
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        };
        window.androidWechatRoute.doAction(JSON.stringify(data));
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickRecordItem(item) {
      goDetails(this, item.prodType, item.prodId, '', item.courseType, 1);
    },
    //分页获取兑换记录
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(
          `${global.apiurl}pointMall/exchangeRecord?limit=10&page=${pageIndex}`,
          function (res) {
            $this.isLoading = false;
            if (pageIndex == 1) {
              $this.recordList = res.data;
            } else {
              $this.recordList = [...$this.recordList, ...res.data];
            }
            if (res.next_page_url == null) {
              $this.dataStatus =
                res.data.length == 0 ? "NO_DATA" : "NO_MORE_DATA";
            } else {
              $this.dataStatus = "HAS_MORE_DATA";
              pageIndex++;
            }
          }
        );
      }
    },
    //分享
    wechatShare: function () {
      let title = "兑换记录";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${
        window.location.href.split("#")[0]
      }#/member/myIntegral/exchangeRecord?refereeId=${localStorage.getItem(
        "userId"
      )}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {});
    },
    //手机端分享
    appShare: function () {
      let title = "兑换记录";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${
        window.location.href.split("#")[0]
      }#/member/myIntegral/exchangeRecord?refereeId=${localStorage.getItem(
        "userId"
      )}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //下滑获取更多专栏
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.dataStatus == "HAS_MORE_DATA" && that.recordList.length > 0) {
          that.getMore();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.recordList = [];
      this.dataStatus = "NO_MORE_DATA";
      this.getMore();
    }
  },
  activated() {
    setDocumentTitle("兑换记录"); // eslint-disable-line
    if (utilJs.checkNeedInitData(this.recordList, pageIndex)) {
      this.initData();
    }
    this.isLoading = false;
    this.wechatShare();
    window.addEventListener("scroll", this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = "NO_MORE_DATA";
    window.removeEventListener("scroll", this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
